<template>
  <div class="video-container">
    <!-- 主视频播放器 -->
    <div class="main-video">
      <video 
        controls 
        autoplay 
        :src="currentVideo.url"
        class="video-player"
      ></video>
      <h2 class="video-title">{{ currentVideo.title }}</h2>
    </div>

    <!-- 推荐视频列表1 -->
    <div class="recommendation-section">
      <h3 class="section-title">热门推荐</h3>
      <div class="video-list horizontal-scroll">
        <div 
          v-for="video in recommendedVideos1" 
          :key="video.id"
          class="video-item"
          @click="changeVideo(video)"
        >
          <img :src="video.thumbnail" :alt="video.title" class="thumbnail">
          <p class="video-item-title">{{ video.title }}</p>
        </div>
      </div>
    </div>

    <!-- 推荐视频列表2 -->
    <div class="recommendation-section">
      <h3 class="section-title">猜你喜欢</h3>
      <div class="video-list horizontal-scroll">
        <div 
          v-for="video in recommendedVideos2" 
          :key="video.id"
          class="video-item"
          @click="changeVideo(video)"
        >
          <img :src="video.thumbnail" :alt="video.title" class="thumbnail">
          <p class="video-item-title">{{ video.title }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 当前播放的视频
const currentVideo = ref({
  id: 1,
  title: '每日一囧',
  url: 'http://codelover.club/coursefiles/lnnpREORzoIdSs-hRgPHOKXVIzwM.mp4',
  thumbnail: 'https://codelover.club/coursefiles/images/film/游戏.jpeg'
});

// 第一个推荐视频列表
const recommendedVideos1 = ref([
  { id: 2, title: '游戏', url: 'http://codelover.club/coursefiles/lnnpREORzoIdSs-hRgPHOKXVIzwM.mp4', thumbnail: 'https://codelover.club/coursefiles/images/film/游戏.jpeg' },
  { id: 3, title: '旅行', url: 'http://codelover.club/coursefiles/lnnpREORzoIdSs-hRgPHOKXVIzwM.mp4', thumbnail: 'https://codelover.club/coursefiles/images/film/旅行.jpeg' },
  { id: 4, title: '生活', url: 'http://codelover.club/coursefiles/lnnpREORzoIdSs-hRgPHOKXVIzwM.mp4', thumbnail: 'https://codelover.club/coursefiles/images/film/生活.jpeg' },
  { id: 5, title: '推荐视频4', url: 'http://codelover.club/coursefiles/lnnpREORzoIdSs-hRgPHOKXVIzwM.mp4', thumbnail: 'https://codelover.club/coursefiles/images/film/游戏.jpeg' },
  { id: 6, title: '推荐视频5', url: 'http://codelover.club/coursefiles/lnnpREORzoIdSs-hRgPHOKXVIzwM.mp4', thumbnail: 'https://codelover.club/coursefiles/images/film/游戏.jpeg' },
]);

// 第二个推荐视频列表
const recommendedVideos2 = ref([
  { id: 7, title: '混剪', url: 'http://codelover.club/coursefiles/lnnpREORzoIdSs-hRgPHOKXVIzwM.mp4', thumbnail: 'https://codelover.club/coursefiles/images/film/混剪.jpeg' },
  { id: 8, title: '爱情', url: 'http://codelover.club/coursefiles/lnnpREORzoIdSs-hRgPHOKXVIzwM.mp4', thumbnail: 'https://codelover.club/coursefiles/images/film/爱情.jpeg' },
  { id: 9, title: '科幻', url: 'http://codelover.club/coursefiles/lnnpREORzoIdSs-hRgPHOKXVIzwM.mp4', thumbnail: 'https://codelover.club/coursefiles/images/film/科幻.jpeg' },
  { id: 10, title: '相关视频4', url: 'http://codelover.club/coursefiles/lnnpREORzoIdSs-hRgPHOKXVIzwM.mp4', thumbnail: 'https://codelover.club/coursefiles/images/film/游戏.jpeg' },
  { id: 11, title: '相关视频5', url: 'http://codelover.club/coursefiles/lnnpREORzoIdSs-hRgPHOKXVIzwM.mp4', thumbnail: 'https://codelover.club/coursefiles/images/film/游戏.jpeg' },
]);

// 切换视频函数
const changeVideo = (video) => {
  currentVideo.value = video;
};
</script>

<style scoped>
.video-container {
  height: 100vh;
  width: 400px;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
}

.main-video {
  height: 30vh;
  margin-bottom: 20px;
}

.video-player {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-title {
  margin-top: 5px;
  font-size: 1.5rem;
}

/* .recommendation-section {
  height: 25vh;
} */

.section-title {
  margin-bottom: 10px;
  font-size: 1.1rem;
  color: #333;
}

.video-list {
  display: flex;
  overflow-x: auto;
  gap: 15px;
  padding-bottom: 10px;
  height: calc(100% - 30px);
}

.video-item {
  flex: 0 0 30%;
  cursor: pointer;
}

.thumbnail {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 6px;
}

.video-item-title {
  margin-top: 5px;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 隐藏滚动条但保持滚动功能 */
.horizontal-scroll::-webkit-scrollbar {
  display: none;
}

.horizontal-scroll {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
</style>